<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <link rel='stylesheet' href='./layui-v2.9.10/layui/css/layui.css' media='all'>
  <link rel='stylesheet' href='./css/index.css' media='all'>
  <link rel="shortcut icon" type="image/x-icon" href="./images/favicon.png" media="screen">
  <link rel="stylesheet" href="./css/viewer.min.css">
  <title>在线epub阅读 - 阅读器 </title>
</head>

<body>
  <!-- 让 IE8/9 支持媒体查询，从而兼容栅格 -->
  <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->

  <div id="functionView">
    <div class="tap" lay-on="open-mulu">目录</div>
    <div class="tap" lay-on="open-shuqian">书签</div>
    <div class="tap" lay-on="func-flag">
      <i class="layui-icon layui-icon-flag" style="font-size: 35px; color: #1E9FFF;" id="flag"></i>
    </div>
    <div class="tap" lay-on="open-shujia">书架</div>
    <div class="tap" lay-on="open-shezhi">设置</div>
    <div class="tap" lay-on="func-top">
      <i class="layui-icon layui-icon-up" style="font-size: 35px; "></i>
    </div>
  </div>
  <div id="setting" lay-on="contro-openSetting">
    <p>打开设置功能区</p>
    <p style="font-size: 15px; color: red; ">10秒后消失</p>
  </div>
  <div id="controlView">
    <div id="previous" lay-on="contro-previous">上一页</div>
    <div id="openSetting" lay-on="contro-openSetting" style="flex-direction: column;">
      <p>打开设置功能区</p>
      <p style="font-size: 15px; margin-top: 20px;">打开该翻页功能后，不能展示图片和点击图书中的链接</p>
      <p style="font-size: 15px; color: red; ">5秒后消失</p>
    </div>
    <div id="next" lay-on="contro-next">下一页</div>
  </div>

  <script src="./js/viewer.min.js"></script>
  <script src="./js/jszip.min.js"></script>
  <!-- 不用使用其他的epub.js,因为有修改过源码：在源码中搜索：源码有改动 -->
  <script src="./js/epub.js"></script>
  <!-- idb-keyval使用方法 https://dgithub.xyz/jakearchibald/idb-keyval#readme -->
  <script src="./js/idb-keyval.js"></script>
  <script src="./js/tools.js"></script>
  <script src='./layui-v2.9.10/layui/layui.js'></script>
  <script>
    // if (isMobileDevice()) location.href = 'MobileDevice.html';

    let { set, setMany, get, getMany, update, del, delMany, clear, entries, keys, values, } = idbKeyval;

    var book = ePub();
    var rendition;
    var displayed;
    var themes; // 样式对象
    var layuiTree; // 目录对应的树结构组件
    var layuiForm; // layui的Form引用

    // 一些样式
    let myThemes = {
      themes_index: 1, //  用于定位到背景色是哪个
      themes_: [
        { BackgroundColor: '#E8E8E8', ForegroundColor: '#F5F5F5', use: true },
        { BackgroundColor: '#E9E4D8', ForegroundColor: '#F5F1E8', use: false },
        { BackgroundColor: '#E1CE9F', ForegroundColor: '#EADEBC', use: false },
        { BackgroundColor: '#C9E0CB', ForegroundColor: '#E0EEE1', use: false },
        { BackgroundColor: '#CBD9DD', ForegroundColor: '#DCEBEF', use: false },
      ],
      fontFamily: `'黑体', 'Helvetica', 'Arial'`,
      fontSize: 33,
      lineHeight: 55,
      viewWidth: detectDeviceType() == 'Mobile' ? 300 : 800,
      color: 'rgb(116 116 116)',
      paragraphSacing: 25, // 段之间的间距
      autoBg: false, // 是否开启自动切换背景颜色的功能
      setting_show: 0, // 是否显示一下。第一次或超过时间后显示
      fanyeType: false, // 是否打开了翻页模式选项
    }
    Object.assign(myThemes, JSON.parse(localStorage.getItem('myThemesStorage') || '{}'));

    // 判断是不是移动端，是的话，就隐藏操作部分
    let isMobile = detectDeviceType() == 'Mobile';
    isMobile ? (() => {
      document.getElementById('functionView').style.visibility = 'hidden';
      if (new Date().getTime() > myThemes.setting_show) {
        document.getElementById('setting').style.opacity = 0.9;
        setTimeout(() => { document.getElementById('setting').style.opacity = 0; }, 1000 * 10);
        myThemes.setting_show = new Date().getTime() + (1000 * 60 * 60 * 24 * 7);
      }
    })() : (document.getElementById('setting').style.visibility = 'hidden');
    
    // 初始化
    window.onload = function () {
      epubFunc.setViewWidth(myThemes.viewWidth);
      setBg(myThemes.themes_index);
      if (myThemes.fanyeType) { document.getElementById('controlView').style.visibility = 'visible'; }
    };
    // 页面退出事件
    window.addEventListener("beforeunload", function (e) {
      // e = e || window.event;
      // if (e) { e.returnValue = '你确定要离开吗？'; }
      // return '你确定要离开吗？';
      // 自动保存当前阅读记录
      bookmarks.unshift({
        "spread": true,
        "title": formatDate('YYYY-MM-DD hh:mm') + '&emsp;【自动】' + current_label + `&emsp;>&emsp;${bookmarkText}...`,
        "id": Math.floor(Math.random() * 16777215).toString(16),
        "cfi": bookMate['cfi'],
      })
      update(bookName, (d) => { d.bookmarks = bookmarks; d.endCfi = bookMate['cfi']; return d; });
      // 关闭epub
      book.destroy(); //  关闭 epub
    });
    // 监听页面大小变化，主要是手机浏览器上下移动时，页面大小会发生变化
    window.addEventListener('resize', function (e) {
      let befResize = bookMate.cfi;
      loadIndex = layer.msg('加载中', { icon: 16, shade: [0.9, '#FFF'], time: 1000 * 10 });
      setTimeout(() => { epubFunc.display(befResize || undefined); layer.close(loadIndex); }, 500);
    })

    // 操作upub库的方法
    let epubFunc = {
      InitBook: function (urlOrArrayBuffer) {
        /* 添加图书，参数是url或者本地上传的文件 */
        book.open(urlOrArrayBuffer);
      },
      renderTo: function () {
        /* 配置epub */
        rendition = book.renderTo(document.body, {
          manager: "continuous",
          flow: "scrolled",
          width: "100%",
        });
        themes = rendition.themes;
        setThemes();
      },
      display: function (display) {
        /* 渲染加载 */
        displayed = rendition.display(display);
        themes = rendition.themes;
      },
      setViewWidth: function (viewWidth_) {
        /* 设置可视区宽度 */
        let w = myThemes.viewWidth;
        document.body.style.width = (viewWidth_ || w) + "px"
        myThemes.viewWidth = viewWidth_ || w;
        document.getElementById('myViewWidth').innerHTML = myThemes.viewWidth;
        setDataMyThemesStorage();
        // TODO 重新渲染epub。没有找到对应的API
      },
      getInfo() {
        /* 图书基本信息：书名+作者+图片 */
        let info = { title: '', creator: '', cover: '', blob: undefined };
        function f(resolve, reject) {
          book.loaded.metadata.then(function (meta) {
            info.title = meta.title.trim(); info.creator = meta.creator.trim();
            if (book.archive) {
              // console.log(`book.archive`, book.archive)
              book.archive.createUrl(book.cover).then(function (url_) {
                info.cover = url_;
                info.blob = book.archive.blob[book.cover];
                resolve(info);
              }, error => {
                alert('发送错误');
                setTimeout(() => { f(resolve, reject) }, 150);
              })
            } else {
              info.cover = book.cover; resolve(info);
            }
          });
        }
        return new Promise((resolve, reject) => { f(resolve, reject) })
      },
    }

    // 开始加载图书，并进行渲染等等操作
    let bookName = url()['bookName'] || '';
    let bookMate; // 从idb中获取到的图书信息，保存到这里
    let bookmarks = []; // 书签
    let current_label = ''; // 当前目录标题名
    loadIndex = layer.msg('加载中', { icon: 16, shade: [0.9, '#FFF'], time: 1000 * 10 });
    Promise.all([
      get(bookName), get_booksData_imgsData('book_' + bookName)
    ]).then(([val, bookData]) => {
      if (!val && !bookData) {
        location.href = 'index.html';
        return;
      }
      epubFunc.InitBook(bookData);
      epubFunc.renderTo();
      epubFunc.display(val.cfi || undefined);
      bookmarks = val.bookmarks || [];
      bookMate = val;
      setTimeout(() => { epubFunc.display(val.endCfi || val.cfi || undefined); layer.close(loadIndex); }, 1000); //  再次渲染，使其渲染定位准确

      // 监听切换，并获取切换的开始和结束位置
      rendition.on("relocated", function (relocated) {
        // console.log(`relocated`, relocated)
        // rendition.getContents()[1].css('line-height', '63px'); // 设置样式
        if (relocated.start && relocated.start.cfi) {
          update(bookName, (d) => { d.cfi = relocated.start.cfi; d.readDate = new Date().getTime(); bookMate = d; return d; });
        }
        progress_();
        document.getElementById('flag').style.color = '#1E9FFF'; // 切换后，恢复标签颜色
      })

      // 切换章节是触发
      rendition.on("rendered", function (section) {
        // console.log(`section`, section)
        // var current = book.navigation && book.navigation.get(h); //  获取的不太准确，不用他了
        let h = Object.keys(book.navigation.tocByHref).find(item => { return item.includes(section.href) }); // 找到正确的href
        var current = loc_hred_id[h];
        if (current) {
          var cssContent = `[data-id="${current.id}"] > .layui-tree-entry { background-color: #e0e0e0;  height: 100%;}`;
          setStyle(cssContent, { id: 'checkedTreeMulu', append: false });
          current_label = current.label;
          loc_id = current.id;
        }
        imgViewer();
        bookmarkTextFn();
        setIframeHeight();
      });

      // 读书进度，百分比
      let tt = 0;
      function progress_() {
        if (tt % 5 != 0) return;
        let cfi = bookMate['cfi'];
        let s = book.locations.epubcfi.getChapterComponent(cfi || '').replace('epubcfi(', '');
        let items = book.locations.spine.items, t = 0;
        for (let index = 0; index < items.length; index++) { if (items[index].cfiBase == s) { t = index; break; } }
        update(bookName, (d) => { d.percentage = (t / items.length * 100).toFixed(2) + '%'; return d; });
      }

      // displayed.then(function (renderer) {
      //    console.log(`renderer`, renderer)
      // });
    });

    // 监听图书加载，获取目录
    let loc; // 保存目录
    let loc_hred_id = {}; // 保存目录的href值和id值的对应关系
    let loc_id = ''; // 记录当前打开的目录标题是哪个
    book.loaded.navigation.then(function ({ toc }) {
      function handl(arr = Array) {
        let a = [];
        arr.forEach(item => {
          let id = item.id || Math.floor(Math.random() * 16777215).toString(16);
          let b = {};
          b['spread'] = true;
          b['title'] = item.label.trim();
          b['id'] = id;
          b['href'] = item.href;
          if (item.subitems.length > 0)
            b['children'] = handl(item.subitems);
          a.push(b);
          loc_hred_id[item.href] = { id, label: item.label.trim() };
        })
        return a;
      }
      loc = handl(toc);
    });

    // 设置样式，
    function setThemes() {
      if (!themes) return;
      let style = { body: {}, p: {}, span: {} }
      style.body['font-size'] = `${myThemes.fontSize}px !important`;
      style.body['font-family'] = `${myThemes.fontFamily} !important`;
      style.body['color'] = `${myThemes.color} !important`;
      style.body['line-height'] = `${myThemes.lineHeight}px !important`;
      style.body['margin-bottom'] = `${myThemes.paragraphSacing}px !important`;
      style.p = style.body;
      style.span = style.body;
      let name = Math.floor(Math.random() * 1677721500).toString(16);
      themes.register(name, style);
      themes.select(name);
      setDataMyThemesStorage();
      document.getElementById('myFontSize').innerText = myThemes.fontSize;
      document.getElementById('myLineHeight').innerText = myThemes.lineHeight;
      document.getElementById('myParagraphSacing').innerText = myThemes.paragraphSacing;
    }

    // 设置背景颜色
    function setBg(index) {
      let th = myThemes.themes_[Number(index)];
      myThemes.themes_index = index;
      var cssContent = `
          html {  background-color: ${th.BackgroundColor};} 
          body { background-color:${th.ForegroundColor}; }
          .tap { background-color:${th.ForegroundColor}; }
        `;
      setStyle(cssContent)
      setDataMyThemesStorage()
    }

    // 监听元素是否在可视区
    function setObserver(callbackIn) {
      try {
        let iframes = getAllDocumentFormIframe()
        for (let index = 0; index < iframes.iframeBodys.length; index++) {
          let body_ = iframes.iframeBodys[index];
          if (body_.getAttribute('isObserver')) { continue; }
          body_.setAttribute('isObserver', '1')
          let bodyChildren = getAllChildElements(body_);
          bodyChildren.forEach(item => {
            isElementInViewportOfObserver(item, callbackIn)
          })
        }
      } catch (error) { }
    }

    // 获取可视区的内容文本，用于保存书签 
    let bookmarkText = '';
    function bookmarkTextFn() { setObserver((el) => { bookmarkText = el.innerText.substr(0, 30).trim(); }) }

    // 设置 iframe 的高度，避免每个iframe最下面的文本显示不完全
    function setIframeHeight() {
      try {
        var iframes = document.getElementsByTagName('iframe');
        if (iframes.length == 0) return {};
        for (var i = 0; i < iframes.length; i++) {
          var iframe = iframes[i];
          let document_ = iframe.contentDocument || iframe.contentWindow.document;
          let htmlHeight = document_.body.parentElement.offsetHeight;
          iframe.style.height = htmlHeight + 'px';
          iframe.parentElement.style.height = htmlHeight + 'px';
        }
      } catch (error) { }
    }

    // 设置图片点击展开浏览功能。
    function imgViewer() {
      try {
        let iframes = getAllDocumentFormIframe()
        for (let index = 0; index < iframes.iframeBodys.length; index++) {
          let body_ = iframes.iframeBodys[index];
          if (body_.getAttribute('isImgViewer')) { continue; }
          body_.setAttribute('isImgViewer', '1')
          let imgs = body_.querySelectorAll('img') || [];
          imgs.forEach(item => { item.addEventListener('click', showImgFn); })
        }
        var showImg = document.createElement("img");
        showImg.setAttribute("src", 'favicon.png');
        var image = new Viewer(showImg, { url: 'src' });
        function showImgFn(e) { showImg.setAttribute("src", e.target.src); image.show(); }
      } catch (error) { }
    }

    function setDataMyThemesStorage() {
      localStorage.setItem('myThemesStorage', JSON.stringify(myThemes));
    }

    layui.use(['jquery', 'form', 'layer', 'tree'], function () {
      var $ = layui.jquery
      var form = layuiForm = layui.form
      var tree = layuiTree = layui.tree
      var util = layui.util;

      let sq, ml, sz
      util.on('lay-on', {
        'open-shuqian': function () {
          sq = layer.open({
            type: 1,
            area: [isMobile ? '85vw' : 'auto', 'auto'], // 宽高
            title: false, // 不显示标题栏
            closeBtn: 0,
            shadeClose: true, // 点击遮罩关闭层
            content: $('#shuqian')
          });
        },
        'open-mulu': function () {
          ml = layer.open({
            type: 1,
            area: [isMobile ? '80vw' : 'auto', 'auto'], // 宽高
            title: false, // 不显示标题栏
            closeBtn: 0,
            shadeClose: true, // 点击遮罩关闭层
            content: $('#mulu')
          });
          var element = document.querySelector(`[data-id="${loc_id}"]`);
          if (element) scrollToElement(element);
          document.getElementById('bookTitle').innerText = bookMate.title
          document.getElementById('bookCreator').innerText = bookMate.creator
          get_booksData_imgsData(bookMate.cover).then(res => { document.getElementById('bookImg_').src = res })
        },
        'open-shujia': function () {
          location.href = 'books.html';
        },
        'open-shezhi': function () {
          sz = layer.open({
            type: 1,
            area: [isMobile ? '99vw' : '40vw', 'auto'], // 宽高
            title: false, // 不显示标题栏
            closeBtn: 0,
            shadeClose: true, // 点击遮罩关闭层
            content: $('#shezhi')
          });
        },
        'func-flag': function () {
          let f = document.getElementById('flag');
          f.style.color = '#ff0a0a';
          // 在移动端中，不能监听切换。自动恢复标签颜色
          isMobile && setTimeout(() => { document.getElementById('flag').style.color = '#1E9FFF'; }, 1000 * 3);
          bookmarks.unshift({
            "spread": true,
            "title": formatDate('YYYY-MM-DD hh:mm') + '&emsp;' + current_label + `&emsp;>&emsp;${bookmarkText}...`,
            "id": Math.floor(Math.random() * 16777215).toString(16),
            "cfi": bookMate['cfi'],
          })
          update(bookName, (d) => { d.bookmarks = bookmarks; return d; });
          tree.reload('test2', { data: bookmarks });
        },
        'func-top': function () {
          scrollTop = window.pageYOffset || document.documentElement.scrollTop;
          window.scrollBy({
            top: -(scrollTop), // 要滚动到的Y轴坐标  
            left: 0, // 要滚动到的X轴坐标（可选
            behavior: "smooth" // 平滑滚动 
          });
        },
        'fontsize-': function () {
          myThemes.fontSize -= 2;
          document.getElementById('myFontSize').innerText = myThemes.fontSize;
          setThemes()
        },
        'fontsize+': function () {
          myThemes.fontSize += 2;
          document.getElementById('myFontSize').innerText = myThemes.fontSize;
          setThemes()
        },
        'lineheight-': function () {
          myThemes.lineHeight -= 5;
          document.getElementById('myLineHeight').innerText = myThemes.lineHeight;
          setThemes()
        },
        'lineheight+': function () {
          myThemes.lineHeight += 5;
          document.getElementById('myLineHeight').innerText = myThemes.lineHeight;
          setThemes()
        },
        'paragraphSacing-': function () {
          myThemes.paragraphSacing -= 5;
          document.getElementById('myParagraphSacing').innerText = myThemes.paragraphSacing;
          setThemes()
        },
        'paragraphSacing+': function () {
          myThemes.paragraphSacing += 5;
          document.getElementById('myParagraphSacing').innerText = myThemes.paragraphSacing;
          setThemes()
        },
        'width-': function () {
          myThemes.viewWidth -= 30;
          epubFunc.setViewWidth(myThemes.viewWidth)
        },
        'width+': function () {
          myThemes.viewWidth += 30;
          epubFunc.setViewWidth(myThemes.viewWidth)
        },
        'contro-previous': function () {
          window.scrollBy(0, -(window.innerHeight - 30));
        },
        'contro-openSetting': function () {
          let functionView_ = document.getElementById('functionView');
          if (functionView_.style.visibility == 'visible') functionView_.style.visibility = 'hidden';
          else functionView_.style.visibility = 'visible';
        },
        'contro-next': function () {
          window.scrollBy(0, (window.innerHeight - 30));
        },
        'test-tips-bottom': function () {
          layer.tips('打开该翻页功能后，不能展示图片和点击图书中的链接', this, { tips: 3 });
        },
      })

      // 渲染目录
      let t = setInterval(() => {
        if (loc)
          tree.render({
            elem: '#ID-tree-mulu', id: 'treeMulu', data: loc, spread: true, showLine: false,
            click: function (obj) {
              loadIndex = layer.msg('加载中', { icon: 16, shade: [0.9, '#FFF'], time: 1000 * 10 });
              var { href } = obj.data;  //获取当前点击的节点数据
              epubFunc.display(href);
              if (obj.state == 'close') obj.elem.find('.layui-tree-iconClick').click()
              { // 多次使用epubFunc.display，作用是点击目录时，确切的定位到对应的目录
                setTimeout(function () {
                  setTimeout(function () { epubFunc.display(href); layer.close(loadIndex); }, 800);
                  epubFunc.display(href);
                }, 800);
                layer.close(ml);
              }
            }
          }), clearInterval(t);
      }, 1000);

      // 渲染书签
      let trr = setInterval(() => {
        if (loc)
          tree.render({
            elem: '#ID-tree-shuqian', id: 'test2', data: bookmarks, spread: true, showLine: false,
            click: function (obj) {
              loadIndex = layer.msg('加载中', { icon: 16, shade: [0.9, '#FFF'], time: 1000 * 10 });
              var { cfi } = obj.data;  //获取当前点击的节点数据
              epubFunc.display(cfi);
              setTimeout(function () { epubFunc.display(cfi); layer.close(loadIndex); }, 800);
              layer.close(sq);
            }
          }), clearInterval(trr);
      }, 1000);

      // 设置主题颜色
      form.on('radio(radio-themes)', function (data) {
        var elem = data.elem; // 获得 radio 原始 DOM 对象
        var value = elem.value; // 获得 radio 值
        setBg(Number(value) - 1)
      });
      // 设置字体类型
      form.on('radio(radio-family)', function (data) {
        var elem = data.elem; // 获得 radio 原始 DOM 对象
        var value = elem.value; // 获得 radio 值
        myThemes.fontFamily = value;
        setThemes()
      });
      // 开启和关闭自动切换背景颜色
      let timeBg;
      form.on('checkbox(checkbox-bg)', function (data) {
        var elem = data.elem; // 获得 checkbox 原始 DOM 对象
        var checked = elem.checked; // 获得 checkbox 选中状态
        myThemes.autoBg = checked;
        autoSetBg(checked);
        setDataMyThemesStorage();
      });
      function autoSetBg(checked) {
        if (checked) {
          timeBg = setInterval(() => {
            setBg((myThemes.themes_index + 1) % myThemes.themes_.length);
            document.querySelector(`[checked][name="bg"]`).removeAttribute('checked');
            document.querySelector(`[value="${myThemes.themes_index + 1}"][name="bg"]`).setAttribute('checked', '');
            layuiForm.render();
          }, 1000 * 30);
        } else {
          clearInterval(timeBg);
        }
      }
      // 设置是否打开翻页功能
      form.on('checkbox(checkbox-fanye)', function (data) {
        var elem = data.elem; // 获得 checkbox 原始 DOM 对象
        var checked = elem.checked; // 获得 checkbox 选中状态
        myThemes.fanyeType = checked;
        let cont = document.getElementById('controlView');
        if (checked) {
          cont.style.visibility = 'visible';
          cont.style.opacity = 0.9;
          setTimeout(() => { cont.style.opacity = 0; }, 1000 * 5);
        } else {
          cont.style.visibility = 'hidden';
        }
        setDataMyThemesStorage();
      });

      // 自动渲染设置里面的选择
      !function () {
        if (myThemes.autoBg) { document.querySelector('#autoBg').setAttribute('checked', ''); autoSetBg(myThemes.autoBg); }
        if (myThemes.fanyeType) { document.querySelector('#fanyeType').setAttribute('checked', ''); }
        if (myThemes.themes_index) { document.querySelector(`[value="${myThemes.themes_index + 1}"][name="bg"]`).setAttribute('checked', '') }
        if (myThemes.fontFamily) { document.querySelector(`[value="${myThemes.fontFamily}"][name="family"]`).setAttribute('checked', '') }
        layuiForm.render();
        setDataMyThemesStorage();
      }()

    })
  </script>

  <div id="shuqian" style="display: none; min-width: 500px; max-height: 80vh; padding: 20px;">
    <div id="ID-tree-shuqian"></div>
  </div>

  <div id="mulu" style="display: none;min-width: 500px;max-height: 80vh;">
    <div id="bookInfo">
      <div id="bookImg"><img id="bookImg_" src=""></div>
      <div id="bookInfoText">
        <div id="bookTitle">狂人日记</div>
        <div id="bookCreator">狂人日记</div>
      </div>
    </div>
    <div id="ID-tree-mulu"></div>
  </div>

  <div id="shezhi" style="display: none;width: 100%;height: 100%;padding: 20px; color: #b4b3b3;box-sizing: border-box;">
    <div class="layui-row layui-col-space20">
      <div class="layui-col-ms12 layui-col-md12">
        <div class="layui-row layui-col-space32 center">
          <div class="layui-col-ms3 layui-col-md3 center">
            <h2 style="color: black;">设置</h2>
          </div>
          <div class="layui-col-ms9 layui-col-md9 "></div>
        </div>
      </div>
      <div class="layui-col-ms12 layui-col-md12">
        <div class="layui-row layui-col-space32 center">
          <div class="layui-col-ms3 layui-col-md3 center"> 阅读主题 </div>
          <div class="layui-col-ms9 layui-col-md9 center-flex-start">
            <div class="layui-form center-flex-start">
              <input type="radio" name="bg" value="1" lay-skin="none" lay-filter="radio-themes">
              <div lay-radio class="color" style="background-color: #E8E8E8;"></div>
              <input type="radio" name="bg" value="2" lay-skin="none" lay-filter="radio-themes">
              <div lay-radio class="color" style="background-color: #E9E4D8;"></div>
              <input type="radio" name="bg" value="3" lay-skin="none" lay-filter="radio-themes">
              <div lay-radio class="color" style="background-color: #E1CE9F;"></div>
              <input type="radio" name="bg" value="4" lay-skin="none" lay-filter="radio-themes">
              <div lay-radio class="color" style="background-color: #C9E0CB;"></div>
              <input type="radio" name="bg" value="5" lay-skin="none" lay-filter="radio-themes">
              <div lay-radio class="color" style="background-color: #CBD9DD;"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-ms12 layui-col-md12">
        <div class="layui-row layui-col-space32 center">
          <div class="layui-col-ms3 layui-col-md3 center"> 正文字体 </div>
          <div class="layui-col-ms9 layui-col-md9 center-flex-start setFontSize">
            <div class="layui-form center-flex-start">
              <input type="radio" name="family" value="'黑体', 'Helvetica', 'Arial'" lay-skin="none"
                lay-filter="radio-family">
              <div lay-radio class="fontFamily center" style="font-family: '黑体', 'Helvetica', 'Arial';">黑体 </div>
              <input type="radio" name="family" value="'宋体', 'SimSun', sans-serif" lay-skin="none"
                lay-filter="radio-family">
              <div lay-radio class="fontFamily center" style="font-family: '宋体', 'SimSun', sans-serif;">宋体</div>
              <input type="radio" name="family" value="'楷体', 'SimSun', sans-serif" lay-skin="none"
                lay-filter="radio-family">
              <div lay-radio class="fontFamily center" style="font-family: '楷体', 'SimSun', sans-serif;">楷体</div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-ms12 layui-col-md12">
        <div class="layui-row layui-col-space32 center">
          <div class="layui-col-ms3 layui-col-md3 center"> 字体大小 </div>
          <div class="layui-col-ms9 layui-col-md9 center-flex-start setFontSize">
            <div class="fontSize center" style="border-radius: 9px 0 0 9px; " lay-on="fontsize-">A -</div>
            <div class="fontSize center" style="cursor: auto;" id="myFontSize"></div>
            <div class="fontSize center" style="border-radius: 0 9px 9px 0; " lay-on="fontsize+">A +</div>
          </div>
        </div>
      </div>
      <div class="layui-col-ms12 layui-col-md12">
        <div class="layui-row layui-col-space32 center">
          <div class="layui-col-ms3 layui-col-md3 center"> 文字高度 </div>
          <div class="layui-col-ms9 layui-col-md9 center-flex-start setFontSize">
            <div class="fontSize center" style="border-radius: 9px 0 0 9px;" lay-on="lineheight-">H -</div>
            <div class="fontSize center" style="cursor: auto;" id="myLineHeight"></div>
            <div class="fontSize center" style="border-radius: 0 9px 9px 0;" lay-on="lineheight+">H +</div>
          </div>
        </div>
      </div>
      <div class="layui-col-ms12 layui-col-md12">
        <div class="layui-row layui-col-space32 center">
          <div class="layui-col-ms3 layui-col-md3 center"> 文段间距 </div>
          <div class="layui-col-ms9 layui-col-md9 center-flex-start setFontSize">
            <div class="fontSize center" style="border-radius: 9px 0 0 9px;" lay-on="paragraphSacing-">H -</div>
            <div class="fontSize center" style="cursor: auto;" id="myParagraphSacing"></div>
            <div class="fontSize center" style="border-radius: 0 9px 9px 0;" lay-on="paragraphSacing+">H +</div>
          </div>
        </div>
      </div>
      <div class="layui-col-ms12 layui-col-md12">
        <div class="layui-row layui-col-space32 center pointer-events-none">
          <div class="layui-col-ms3 layui-col-md3 center"> 页面宽度 </div>
          <div class="layui-col-ms9 layui-col-md9 center-flex-start setFontSize">
            <div class="fontSize center" style="border-radius: 9px 0 0 9px;" lay-on="width-">小 -</div>
            <div class="fontSize center" style="cursor: auto;" id="myViewWidth"></div>
            <div class="fontSize center" style="border-radius: 0 9px 9px 0;" lay-on="width+">大 +</div>
          </div>
        </div>
      </div>
      <div class="layui-col-ms12 layui-col-md12">
        <div class="layui-row layui-col-space32 center">
          <div class="layui-col-ms3 layui-col-md3 center"> 背景颜色 </div>
          <div class="layui-col-ms9 layui-col-md9 center-flex-start setFontSize">
            <div class="layui-form">
              <input id="autoBg" type="checkbox" lay-skin="tag" lay-filter="checkbox-bg">
              <div lay-checkbox>
                <i class="layui-icon layui-icon-heart" style="position: relative; top: 1px; line-height: normal;"></i>
                自动切换[30秒]
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-ms12 layui-col-md12">
        <div class="layui-row layui-col-space32 center">
          <div class="layui-col-ms3 layui-col-md3 center"> 翻页模式 </div>
          <div class="layui-col-ms9 layui-col-md9 center-flex-start setFontSize">
            <div class="layui-form">
              <input id="fanyeType" type="checkbox" lay-skin="tag" lay-filter="checkbox-fanye">
              <div lay-checkbox>
                <i class="layui-icon layui-icon-heart" style="position: relative; top: 1px; line-height: normal;"></i>
                上下页切换
              </div>
              <i class="layui-icon layui-icon-survey" lay-on="test-tips-bottom"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>